﻿<!DOCTYPE html>
<html>
<head>
	<title>微信公众号数据看板</title>
	<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script>
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <link rel="stylesheet" type="text/css" href="../layui/css/layui.css">
</head>
<style type="text/css">
	body{

		padding: 20px;
	}
	.layui-table-header .layui-table tr{

    		background:#1E9FFF;
    		color:#F0F0F0;

    	}

	.mianBan-ul .mianBan-item{

		width:150px;
		height: 150px;
		float:left;
		background:#1E9FFF;
		margin:10px;
		border-radius: 10px;
		color:#f0f0f0;
		text-align: center;
		padding:10px;
	}

	.mianBan-ul .mianBan-item .item-font{ 
		font-size:15px;
	 }
	.mianBan-ul .mianBan-item .item-num{

		font-size:60px;
	}
</style>
<body>
	<div class="layui-container">

		<div class="layui-tab">
		  <ul class="layui-tab-title">
		    <li class="layui-this">按天数统计</li>
		    <li>按客服统计</li>
		  </ul>
		  <div class="layui-tab-content">
		    <div class="layui-tab-item layui-show"><table id="table1"></table></div>
		    <div class="layui-tab-item"><table id="table2"></table></div>
		  </div>
		</div>

	</div>
</body>
<script src="../layui/layui.all.js"></script>
<script type="text/javascript">


	createTable('table1',1,[
					 {field: 'DATE', title: '日期',  sort: true, fixed: 'left'}
					,{field: 'COUNT', title: '提交数量'}
				])

	createTable('table2',2,[
				 {field: 'DATE', title: '日期',  sort: true, fixed: 'left'}
				,{field: 'last_worker', title: '客服名称'}
				,{field: 'COUNT', title: '提交数量'}
			])

	function createTable(id,type,cols){

		table=layui.table;

		table.render({

				elem:'#'+id,
				url:'api.php',
				method:'post',
				where:{'type':type},
				page:true,
				limit:10,
				limits:[10,20,30,40],
				cols:[cols],
				// initSort:{field:'DATE',type:'desc'}

		})

	}



</script>
</html>